<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip class="item" effect="dark" content="搜索" placement="top">
        <el-button
          type="primary"
          circle
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="重置" placement="top">
        <el-button
          icon="el-icon-refresh"
          circle
          size="mini"
          @click="resetQuery"
        />
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
        placement="top"
      >
        <el-button
          size="mini"
          circle
          icon="el-icon-menu"
          @click="toggleSearch()"
        />
      </el-tooltip>
      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip> -->
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
        <el-button
          v-if="columns"
          size="mini"
          circle
          icon="el-icon-setting"
          @click="showColumn()"
        />
      </el-tooltip>
    </el-row>
    <!-- <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog> -->
    <el-dialog
      :title="title"
      width="300px"
      :visible.sync="open"
      append-to-body
      v-dialogDrag
    >
      <el-table s :data="columns" max-height="500px"  >
        <el-table-column type="selection" width="55" align="center" v-if="selectionFlag"/>
        <el-table-column label="字段信息" align="center" prop="label" />
        <el-table-column label="关 开" align="center" prop="visible">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.visible"
              @change="handleVisibleChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="loading" @click="handleSubmit"
          >确 定</el-button
        >
        <el-button :disabled="loading" @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { findColunms, saveColunms } from '@/api/message/colunms'

export default {
  name: 'RightToolbar',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array
    },
    listName: {
      type: String,
      default: ''
    },
    //复选框显示隐藏
    selectionFlag:{
      type: Boolean,
      default: true
    } ,
    createFlag: {
      type: Boolean,
      default: false
    },
    submitFlag: {
      type: Boolean,
      default: false
    },
    createQuery() {

    },
    submitSave(){

    }
  },
  data () {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: '显示/隐藏',
      // 是否显示弹出层
      open: false,
      loading: false,
      // 缓存的列数据
      cacheColumns: [],
    }
  },

  created () {
    // if(this.columns){
    //   this.columns[0].visible = false;
    // }
    if(!this.createFlag){
      if (this.listName && this.columns) {
        findColunms(this.listName).then(response => {
          this.cacheColumns = response.data
          this.cacheColumns.forEach(cachItem => {
            if (!cachItem.visible) {
              this.columns.forEach(item => {
                if (item.key == cachItem.key) {
                  item.visible = cachItem.visible
                }
              })
            }
          })
        })
      }
    }else{
      this.createQuery()
    }
  },
  methods: {
    selectAll () {

this.$refs.mulTable.clearSelection()

},
    // 隐藏显示搜索
    toggleSearch () {
      this.$emit('update:showSearch', !this.showSearch)
    },
    // 刷新
    refresh () {
      this.$emit('queryTable')
    },
    // 重置
    resetQuery () {
      this.$emit('resetQuery')
    },
    // 搜索
    handleQuery () {
      this.$emit('handleQuery')
    },
    // 右侧列表元素变化
    dataChange (data) {
      for (var item in this.columns) {
        const key = this.columns[item].key
        this.columns[item].visible = !data.includes(key)
      }
    },
    handleVisibleChange (row) {

    },
    handleSubmit () {
        if(this.submitFlag){
          this.submitSave().then(response => {
            this.msgSuccess('保存成功')
            this.open = false
            this.handleQuery()
          })
        }else{
          const postData = {}
          if (this.listName && this.columns) {
            postData.listName = this.listName
            postData.columnsDtoList = []
            this.columns.forEach(item => {
              if (!item.visible) { // 只保存隐藏的列
                postData.columnsDtoList.push({
                  key: item.key,
                  label: item.label,
                  visible: item.visible
                })
              }
            })
          saveColunms(postData).then(response => {
            this.msgSuccess('保存成功')
            this.open = false
          })
        }
      }
    },
    handleCancel () {
      this.open = false
    },
    // 打开显隐列dialog
    showColumn () {
      this.open = true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}

</style>
